<template>
	<el-form size="medium" ref="fundForm" :model="fundForm" class="fund_select_wrapper">
		<div class="table">
			<div class="head">
				<h4>经费类型</h4>
				<h4>标题</h4>
				<h4>经费号</h4>
				<h4>总额度</h4>
			</div>
			<div class="empty" v-if="fundForm.funds.length === 0">暂无数据</div>
			<div v-else class="item" v-for="(item, index) in fundForm.funds" :key="index">
				<el-form-item :prop="`funds.${index}.type`" :rules="fundRules.type">
					<el-select v-model="item.type" placeholder="选择经费类型" style="width: 100%" @change="handleSelectChange">
						<el-option v-for="(n, i) in fundTypes" :key="i" :label="n.msg" :value="n.value" />
					</el-select>
				</el-form-item>
				<el-form-item :prop="`funds.${index}.name`" :rules="fundRules.name">
					<el-input v-model="item.name" placeholder="输入标题"></el-input>
				</el-form-item>
				<el-form-item :prop="`funds.${index}.fno`" :rules="fundRules.fno">
					<el-input v-model="item.fno" placeholder="输入经费号"></el-input>
				</el-form-item>
				<el-form-item :prop="`funds.${index}.quota`" :rules="fundRules.quota">
					<sw-money-input v-model="item.quota" placeholder="输入总额度" />
				</el-form-item>
				<el-form-item>
					<el-button type="text" class="del" icon="el-icon-delete" @click="handleDelete(index)"></el-button>
				</el-form-item>
			</div>
		</div>
		<el-button type="primary" size="small" class="add" @click="handleAdded()">新增经费</el-button>
	</el-form>
</template>

<script>
import { mapGetters } from 'vuex';
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	props: {
		value: { type: Array, default: () => [] }
	},
	data() {
		return {
			fundForm: { funds: [] },
			fundRules: {
				type: [{ required: true, message: '请选择经费类型', trigger: 'change' }]
			},
			tableData: []
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		fundTypes() {
			return this.dictEnums['FUND_TYPE'] || [];
		}
	},
	watch: {
		value(arr) {
			this.$set(this.fundForm, 'funds', arr);
		},
		'fundForm.funds'(arr) {
			this.$emit('input', arr);
			this.dispatch('ElFormItem', 'el.form.change', [arr]);
		}
	},
	methods: {
		handleAdded() {
			this.fundForm.funds.push({ type: '', name: '', fno: '', quota: '' });
		},

		handleDelete(index) {
			this.fundForm.funds.splice(index, 1);
		},

		//验证表单
		validChildForm() {
			return new Promise((resolve) => {
				this.$refs['fundForm'].validate((valid) => {
					resolve(valid);
				});
			});
		},

		handleSelectChange(val) {
			if (val === '0') {
				this.$delete(this.fundRules, 'name');
				this.$delete(this.fundRules, 'fno');
				this.$delete(this.fundRules, 'quota');
			} else {
				const initRules = (message) => {
					return [{ required: true, message, trigger: 'blur' }];
				};
				this.$set(this.userRules, 'name', initRules('请输入标题'));
				this.$set(this.userRules, 'fno', initRules('请输入经费号'));
				this.$set(this.userRules, 'quota', initRules('请输入总额度'));
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.fund_select_wrapper {
	line-height: 1;
	.table {
		width: 100%;
		border: solid 1px #ebeef5;
		box-sizing: border-box;
		border-radius: 4px;
		overflow: hidden;
	}
	.head {
		display: flex;
		padding-right: 56px;
		background-color: #f6f8fa;
		h4 {
			flex: 1;
			color: #606266;
			line-height: 1;
			font-size: 15px;
			padding: 18px 10px;
		}
	}
	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: solid 1px #ebeef5;
		font-size: 15px;
		color: #909399;
		height: 56px;
	}
	.item {
		display: flex;
		border-top: solid 1px #ebeef5;
	}
	.el-form-item {
		flex: 1;
		padding: 10px;
		overflow: hidden;
		&:last-child {
			flex: none;
			width: 36px;
			flex-shrink: 0;
		}
	}
	.el-button.del {
		display: flex;
		font-size: 18px;
		padding: 8px;
	}
	.el-button.add {
		font-size: 14px;
		margin-top: 10px;
	}
	&:deep(.el-form-item__content) {
		line-height: 1;
	}
}
</style>
